<template>
  <div class="editInfo">
    <!-- 下面绑定的是inputValue的值 有值就表示true 输入框没值inputValue就是空 undefined  就是false
    当输入框没内容的时候 右上角没有保存两个字 但是还是能点击 点击范围变小啦 -->
    <!-- 用v-if  v-else也能实现右上角是否有保存两字 但是这样有多了一组标签 标签多了 页面加载成本也高啦 -->
    <hm-nav-bar
      :title="title[type]"
      :right="inputValue ? '保存' : ''"
      @rightClick="save"
      :path="path"
    ></hm-nav-bar>
    <div class="content">
      <van-uploader
        v-if="type === 'avatar'"
        v-model="uploadFile"
        :max-count="1"
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="del"
      ></van-uploader>
      <van-field class="field" v-model="inputValue" v-else></van-field>
    </div>
  </div>
</template>
<script>
import { auEdit, upload } from '../../../api/my'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      uploadFile: [],
      inputValue: '',
      type: this.$route.query.type,
      title: {
        nickname: '修改昵称',
        intro: '修改个人简介',
        avatar: '修改头像',
        position: '修改职位'
      },
      path: '/home/myInfo'
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    if (this.type === 'position') {
      this.path = '/home/my'
    }
    if (this.type === 'avatar') {
      if (this.userInfo[this.type]) {
        //   因为uploadFile是一个数组 我们限制了只能上传一张图片 因此数组下标0取出这个数组元素
        this.uploadFile[0] = {
          url: process.env.VUE_APP_URL + this.userInfo[this.type]
        }
      }
    } else {
      this.inputValue = this.userInfo[this.type]
    }
  },
  methods: {
    save () {
      // 处理输入框没内容 右上角没保存 但还能点击的问题 (只是保存两个字没了点击还在啊 只是点击范围变小啦)
      if (this.inputValue) {
        this.editInfo()
      }
    },
    editInfo () {
      auEdit({ [this.type]: this.inputValue }).then(res => {
        this.$toast.success('个人资料修改成功')
        this.$store.dispatch('getUserInfo')
        this.$router.push(this.path)
      })
    },
    beforeRead (file) {
      const isImg = file.type === 'image/png' || file.type === 'image/jpeg'
      const litmitM = file.size / 1024 / 1024 < 1
      if (!isImg) {
        this.$toast.fail('请上传png或jpeg格式图片')
      }
      if (!litmitM) {
        this.$toast.fail('请上传小于1m的图片')
      }
      return isImg && litmitM
    },
    afterRead (res) {
      const _formData = new FormData()
      _formData.append('files', res.file)
      //   加载 调用上传接口前加载
      this.uploadFile[0].status = 'uploading'
      upload(_formData).then(res2 => {
        this.inputValue = res2.data.data[0].id
        //   加载完毕 上传完成 成功 清除加载
        this.uploadFile[0].status = 'done'
        window.console.log(res2)
      })
    },
    // 删除文件前处理
    del () {
      this.inputValue = ''
      //   如果是return false就无法删除
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.editInfo {
  .content {
    text-align: center;
    padding: 20px @p15;
    .field {
      background-color: #f7f4f5;
    }
  }
}
</style>
